<template>
  <div class="fitness-container">
    <div class="page-header">
      <h1>健身锻炼</h1>
      <p class="subtitle">强健体魄，为人生奋斗提供坚实基础</p>
    </div>

    <div class="content-section">
      <div class="intro-text">
        <p>身体健康是一切成就的基础。规律的健身锻炼不仅能增强体质，还能提升精神状态和工作效率。</p>
      </div>

      <div class="fitness-areas">
        <div class="area-card">
          <h3>有氧运动</h3>
          <p>提升心肺功能，增强耐力，促进新陈代谢。</p>
          <ul>
            <li>跑步：简单易行，随时随地可进行</li>
            <li>游泳：全身运动，对关节友好</li>
            <li>骑行：户外活动，享受自然风光</li>
            <li>跳绳：高效燃脂，提升协调性</li>
          </ul>
        </div>

        <div class="area-card">
          <h3>力量训练</h3>
          <p>增强肌肉力量，改善体型，预防骨质疏松。</p>
          <ul>
            <li>自重训练：俯卧撑、深蹲、引体向上</li>
            <li>器械训练：健身房器械练习</li>
            <li>哑铃训练：灵活多样，适合家庭锻炼</li>
            <li>阻力带训练：便携实用，适合旅行</li>
          </ul>
        </div>

        <div class="area-card">
          <h3>柔韧性训练</h3>
          <p>增加关节活动范围，预防运动损伤，改善姿态。</p>
          <ul>
            <li>瑜伽：身心合一，提升平衡感</li>
            <li>普拉提：核心力量，改善姿态</li>
            <li>拉伸运动：运动前后必备，放松肌肉</li>
          </ul>
        </div>

        <div class="area-card">
          <h3>恢复与休息</h3>
          <p>合理安排休息时间，让身体得到充分恢复。</p>
          <ul>
            <li>充足睡眠：每晚7-9小时优质睡眠</li>
            <li>按摩放松：缓解肌肉紧张</li>
            <li>冷热交替：促进血液循环</li>
          </ul>
        </div>
      </div>

      <div class="training-plans">
        <h2>训练计划建议</h2>
        <div class="plans-grid">
          <div class="plan-card">
            <h4>初学者计划</h4>
            <p>每周3次，每次30分钟，以基础动作为主</p>
            <ul>
              <li>周一：快走或慢跑20分钟</li>
              <li>周三：基础力量训练（俯卧撑、深蹲）</li>
              <li>周五：瑜伽或拉伸30分钟</li>
            </ul>
          </div>
          <div class="plan-card">
            <h4>进阶者计划</h4>
            <p>每周4-5次，结合有氧和力量训练</p>
            <ul>
              <li>周一、三、五：力量训练</li>
              <li>周二、四：有氧运动</li>
              <li>周末：户外活动或瑜伽</li>
            </ul>
          </div>
          <div class="plan-card">
            <h4>高级者计划</h4>
            <p>每周5-6次，高强度间歇训练</p>
            <ul>
              <li>结合HIIT、力量循环训练</li>
              <li>专项技能训练</li>
              <li>个性化调整</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="nutrition-tip">
        <h3>营养配合</h3>
        <p>健身效果的50%来自锻炼，另外50%来自饮食。合理的营养搭配能让健身效果事半功倍。</p>
        <ul>
          <li>蛋白质：肌肉修复与增长的关键</li>
          <li>碳水化合物：提供运动能量</li>
          <li>健康脂肪：维持激素平衡</li>
          <li>充足水分：保持身体水平衡</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fitness-container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2.5rem;
  color: var(--vt-c-indigo);
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--color-text);
  opacity: 0.8;
}

.intro-text {
  background-color: var(--color-background-soft);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  text-align: center;
}

.intro-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.fitness-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.area-card {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.area-card h3 {
  color: var(--vt-c-indigo);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.area-card p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.area-card ul {
  padding-left: 1.5rem;
}

.area-card li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.training-plans h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.plan-card {
  background-color: var(--color-background-soft);
  border-radius: 12px;
  padding: 2rem;
}

.plan-card h4 {
  color: var(--vt-c-indigo);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.plan-card p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.plan-card ul {
  padding-left: 1.5rem;
}

.plan-card li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.nutrition-tip {
  background: linear-gradient(135deg, #42b883, #3498db);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
}

.nutrition-tip h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.nutrition-tip p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.nutrition-tip ul {
  display: inline-block;
  text-align: left;
  padding-left: 1.5rem;
  max-width: 600px;
}

.nutrition-tip li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .fitness-container {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .fitness-areas,
  .plans-grid {
    grid-template-columns: 1fr;
  }
}
</style>